<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户信息</title>
  <script>
    // 页面加载时，发起请求获取用户信息
    window.onload = function() {
      fetch('http://localhost:8080/userInFo')

              .then(response => {
                if (!response.ok) {
                  throw new Error('用户信息加载失败');
                }
                return response.json(); // 解析 JSON 响应
              })
              .then(data => {
                // 渲染用户信息
                if (data) {
                  document.getElementById('user-id').textContent = data.user_id || '无';
                  document.getElementById('user-name').textContent = data.user_name || '无';
                  document.getElementById('user-image').src = data.user_image || '/images/default-avatar.png';
                  document.getElementById('user-kubi').textContent = data.user_kubi || '0';
                }
              })
              .catch(error => {
                // 错误处理
                console.error(error);
                document.getElementById('error-message').textContent = "加载用户信息失败";
              });
    };
  </script>
</head>
<body>
<h1>用户信息</h1>

<!-- 错误提示 -->
<div id="error-message" style="color: red;"></div>

<!-- 用户信息展示 -->
<div>
  <p><strong>用户ID:</strong> <span id="user-id">加载中...</span></p>
  <p><strong>用户名:</strong> <span id="user-name">加载中...</span></p>
  <p><strong>头像:</strong> <img id="user-image" src="loading.jpg" alt="用户头像" width="100"></p>
  <p><strong>库币:</strong> <span id="user-kubi">加载中...</span></p>
</div>

</body>
</html>
